<template>
  <view v-if="pageData" class="page-body">
    <div
      class="page-head"
      :style="{
        background: `url(${
          asyncImgs.service_home
            ? asyncImgs.service_home.commission_index_bg || ''
            : ''
        }) 0 0 / 100% 100% no-repeat`,
      }"
    >
      <div class="flex-y-center u-m-b-12">
        <div class="flex-w-1">全部佣金（元）</div>
        <div
          class="flex-y-center"
          @click="
            $utils.toUrl('/user/share/commission-details?type=service-home')
          "
        >
          <div class="u-font-24">累计明细</div>
          <div class="iconfont icon-arrow-right u-font-20"></div>
        </div>
      </div>

      <div class="flex-y-end">
        <div class="flex-w-1">
          <div class="color-fff font-w-600 u-m-b-8">
            <text class="u-m-r-10" style="font-size: 44rpx">¥</text>
            <text style="font-size: 68rpx">{{ pageData.price || "0.00" }}</text>
          </div>
          <div>累计佣金 ¥{{ pageData.total_price }}</div>
        </div>
        <div class="bt" @click="$utils.toUrl('/service-home/commission/cash')">
          提现佣金
        </div>
      </div>
    </div>

    <div class="font-w-600 u-font-34 u-m-t-40">待结算佣金</div>

    <div
      class="page-head page-head-1 u-m-t-24"
      :style="{
        background: '#f5f5f5',
      }"
    >
      <div class="flex-y-center">
        <div class="flex-w-1 u-font-24">待结算佣金（元）</div>
        <div class="flex-y-center color-999">
          <div
            class="u-font-24"
            @click="
              $utils.toUrl(
                '/user/share/commission-details?type=service-home&is_price_no=1'
              )
            "
          >
            待结算佣金明细
          </div>
          <div class="iconfont icon-arrow-right u-font-20"></div>
        </div>
      </div>

      <div class="flex-y-end">
        <div class="flex-w-1">
          <div class="font-w-600 u-m-t-12 u-m-b-12">
            <text class="u-m-r-10" style="font-size: 30rpx">¥</text>
            <text style="font-size: 44rpx">{{
              pageData.sumMoneyIsPriceNo || "0.00"
            }}</text>
          </div>
          <div class="color-999">商品过售后期后自动到账</div>
        </div>
      </div>
    </div>
    <div class="font-w-600 u-font-34 u-m-t-40">提现佣金</div>

    <div
      class="page-head page-head-1 u-m-t-24"
      :style="{
        background: '#f5f5f5',
      }"
    >
      <div class="flex-y-center">
        <div class="flex-w-1 u-font-24">累计提现佣金（元）</div>
        <div class="flex-y-center color-999">
          <div
            class="u-font-24"
            @click="$utils.toUrl('/user/cash/cash?cash_type=6')"
          >
            提现明细
          </div>
          <div class="iconfont icon-arrow-right u-font-20"></div>
        </div>
      </div>

      <div class="flex-y-end">
        <div class="flex-w-1">
          <div class="font-w-600 u-m-t-12 u-m-b-12">
            <text class="u-m-r-10" style="font-size: 30rpx">¥</text>
            <text style="font-size: 44rpx">{{
              pageData.sharePrice.total_cash || "0.00"
            }}</text>
          </div>
          <div class="color-999">
            待审核提现佣金 ¥{{ pageData.sharePrice.wait_audit || "0.00" }}
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
import { profitList } from "@/api/service-home.js";
export default {
  data() {
    return {
      pageData: "",
    };
  },
  onLoad() {},
  onShow() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const res = await profitList({}, true);
      this.pageData = res;
    },
  },
  computed: {},
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  padding: 24rpx;
  min-height: 100vh;

  .page-head {
    border-radius: 20rpx;
    padding: 44rpx 42rpx;
    color: #ffb2a2;

    .bt {
      width: 192rpx;
      line-height: 78rpx;
      background: #ffffff;
      border-radius: 120rpx 120rpx 120rpx 120rpx;
      color: #f0250e;
      text-align: center;
      font-weight: 600;
    }
  }

  .page-head-1 {
    color: #262626;
    padding: 28rpx 44rpx;
  }
}
</style>
